<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p>Lorem ipsum dolor sit amet.</p>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et officiis natus nobis nesciunt libero nulla,
        molestiae, consectetur assumenda neque eum ad mollitia sit? Labore consectetur cupiditate repellendus sint, odit
        omnis?</h1>

    <div id="parent">
        <p>1</p>

        <p>2</p>
    </div>
    <!-- ol>li*5{lorem$$$$} -->
    <ol class="olList">
        <li>lorem001</li>
        <li>lorem002</li>
        <li>lorem003</li>
        <li>lorem004</li>
        <li>lorem005</li>
    </ol>

    <script>
        //---- 创建节点
        // 创建元素节点  document.createElement('tag')
        // 创建文本节点  document.createTextNode('content')
        // 创建属性节点  document.createAttribute('attr')


        // let p = document.createElement('p');
        // let text = document.createTextNode('新的p元素');
        // console.log(p, text);

        //-----新增节点（插入节点）
        // 1.appendChild()  将一个新节点作为最后一个子节点添加到指定父节点
        // p.appendChild(text);
        // let body = document.body;
        // body.appendChild(p);

        //练习：
        //获取div元素
        // let div = document.getElementById('parent');
        // for (let i = 0; i < 3; i++) {
        //     //创建span元素
        //     let span = document.createElement('span');
        //     //创建文本
        //     let str = 'child' + i;
        //     let text = document.createTextNode(str);
        //     //把文本放到span元素中
        //     span.appendChild(text);
        //     //把创建的元素节点放到div中
        //     div.appendChild(span)
        // }

        // 2.insertBefore(newChild,oldChild)  在父节点已有的某个子节点前添加
        // body.insertBefore(p, div)

        //练习：创建一个h1元素添加到刚才的div中，作为第二个子元素
        // let h1 = document.createElement('h1');
        // let text = document.createTextNode('新的h1元素');
        // h1.appendChild(text);

        // let div=document.getElementById('parent');

        // let p=document.getElementsByTagName('p')[2];
        // console.log(p);
        // div.insertBefore(h1,p)

        //----- 删除节点  removeChild(childNode) 删除子节点
        //通过下标得到具体的某个节点
        // let ol = document.getElementsByClassName('olList')[0];
        // let child3 = ol.children[2];
        // let child1=ol.firstElementChild;
        // let child5=ol.lastElementChild;
        // console.log(child1,child5);
        // ol.removeChild(child3);

        //----- 替换节点  replaceChild()  替换父元素的某个子节点
        //父元素.replaceChild(newChild,oldChild) 

        //创建一个新的li
        let newLi = document.createElement('li');
        let text = document.createTextNode('新创建的li');
        newLi.appendChild(text);
        // 获取父元素节点
        let ol = document.getElementsByClassName('olList')[0];
        let child5 = ol.lastElementChild;
        //替换
        ol.replaceChild(newLi, child5);

        //----- 克隆节点 
        //有时候我们并不需要创建一个新的节点再添加，只需要把当前已有的节点拷贝一份出来添加即可
        /**
         * 节点.cloneNode(布尔值) 默认参数为false
         * 布尔值为false实现浅克隆，即只克隆当前元素，不包含子元素和其他文本内容
         * 布尔值为true实现深克隆，连同元素内部的子元素和其他文本内容一起被克隆
        */
        let newOl1 = ol.cloneNode(false);
        console.log(newOl1);
        let newOl2 = ol.cloneNode(true);
        console.log(newOl2);

        document.body.appendChild(newOl2)


    </script>

</body>

</html>